<template>
  <div class="movie-detail-container">
    <div class="movie-detail-header">
      <img :src="detail.image" mode="scaleToFill" class="movie-img">
      <div class="movie-info">
        <h3 class="title">{{detail.title}}（{{detail.year}}）</h3>
        <h3 class="original-title">{{detail.original_title}}（{{detail.year}}）</h3>
        <p class="tags"> {{detail.genres}} / {{detail.countries}} / 片长{{detail.durations}} </p>
        <div class="btns">
          <i-button i-class="btn" type="ghost"><i-icon type="like" /> 想看</i-button>
          <i-button i-class="btn" type="ghost"><i-icon type="collection" /> 看过</i-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getMovieDetail } from '../../api/movie'
export default {
  data () {
    return {
      detail: {
        title: '电影详情',
        image: ''
      }
    }
  },
  onLoad (options) {
    this.getMoiveDetail(options.id)
  },
  methods: {
    getMoiveDetail (id) {
      getMovieDetail(id).then(res => {
        this.detail = {
          title: res.title,
          image: res.images.large,
          year: res.year,
          original_title: res.original_title,
          genres: res.genres.join(' '),
          countries: res.countries.join(' '),
          durations: res.durations.join(' ')
        }
        wx.setNavigationBarTitle({
          title: this.detail.title
        })
      })
    }
  }
}
</script>

<style lang="less">
.movie-detail-container {
  background-color: #f4f5f9;
  box-sizing: border-box;
  padding: 25rpx 30rpx;
  .movie-detail-header {
    display: flex;
    flex-direction: row;
    .movie-img {
      width: 240rpx;
      height: 320rpx;
      border-radius: 10rpx;
      margin-right: 40rpx;
    }
    .movie-info {
      flex: 1;
      .title {
        color: #1b1b1d;
      }
      .original-title {
        font-weight: 400;
        color: #828387;
        font-size: 16px;
      }
      .tags {
        font-size: 12px;
        color: #828387;
        margin-top: 30rpx;
      }
      .btns {
        display: flex;
        justify-content: center;
        .btn {
          width: 170rpx;
          height: 80rpx;
          line-height: 80rpx;
          text-align: center;
          background-color: #fff;
        }
      }
    }
  } 
}
</style>

